<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直对齐属性</title>
		<style>
			p img{
				width: 100px;
				height: 100px;
			}
			/*垂直对齐属性 :vertical-align属性【4种效果：①基线对齐】*/
			p img.top{
				vertical-align: top;
			}
			p img.middle{
				vertical-align: middle;
			}
			p img.bottom{
				vertical-align: bottom;
			}
			
		</style>
	</head>
	<body>
		<!--表格常用元素【也可以用于行内元素】 功能：文本与图片对齐方式【4种】
		vertical-align属性
		-->
		<p>
			基线对齐<img src="../img/10.png" alt="太乙" class="baseline">
		</p>
		<p>
			顶部对齐<img src="../img/20.png" alt="哪吒1" class="top" >
		</p>
		<p>
			中间对齐<img src="../img/30.png" alt="哪吒2" class="middle">
		</p>
		<p>
			        <img src="../img/40.png" alt="申公豹" class="bear">
		</p>
	</body>
</html>